<template>
  <div class="wrapper">
    <label>应用名称：</label>
    <el-input v-model="name" style="width: 526px" name="appName" v-validate="vali.appName"></el-input>
    <vali-msg flag="appName"></vali-msg>
    <label>编辑角色：</label>
    <el-transfer
      v-model="defaultValue"
      v-validate="vali.allow_role_ids"
      name="allow_role_ids"
      filterable
      :left-default-checked="[]"
      :right-default-checked="[]"
      :render-content="renderFunc"
      :titles="['全部角色', '当前角色']"
      :button-texts="['移除', '赋予']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      @change="handleChange"
      :data="data">
    </el-transfer>
    <vali-msg flag="allow_role_ids"></vali-msg>
    <label></label><el-button type="primary" @click="addApp">增加应用</el-button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { join } from 'lodash'

export default {
  mounted () {
    // console.log('id:', this.id)
    this.getDetail()
  },
  computed: {
    ...mapState({
      detail: state => state.app.detail,
      allRoles: state => state.role.allList
    }),
    id () {
      return this.$route.params.id
    }
  },
  data () {
    return {
      data: [],
      defaultValue: [],
      rightIds: [],
      name: '',
      allow_role_ids: ''
    }
  },
  methods: {
    async getDetail () {
      await this.$store.dispatch('role/getAll')
      this.data = this.generateData()
    },
    handleChange (value, direction, movedKeys) {
      this.allow_role_ids = join(value, ',')
      // console.log('allow_role_ids:', this.allow_role_ids)
      // if (direction === 'left') {
        // 减少
      // } else {
        // 增加
      // }
    },
    generateData () {
      const data = []
      // console.log('aaa:', this.allRoles)
      for (let i = 0; i < this.allRoles.length; i++) {
        if (this.allRoles[i].status === 1) {
          data.push({
            key: this.allRoles[i].id,
            label: this.allRoles[i].name_cn,
            disabled: false
          })
        }
      }
      return data
    },
    renderFunc (h, option) {
      return h('span', `${option.key} - ${option.label}`)
    },
    addApp () {
      this.$validator.validateAll().then(success => {
        if (success) {
          let payload = {name: this.name, allow_role_ids: this.allow_role_ids}
          this.$store.dispatch('app/addApp', payload).then(res => {
            this.$router.push('/system/list')
          }).catch(() => {})
          // console.log('success:', payload)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "../../../assets/scss/base.scss";
.wrapper{
  label{
    display: inline-block;
    vertical-align: top;
    width: $label-w;
    height: 40px;
    line-height: 40px;
    text-align: right;
  }
  .el-transfer{
    display: inline-block;
  }
  .el-button{
    margin-left: 5px !important;
    margin-top: 20px !important;
  }
  .validate-msg{
    margin-left: $label-w + 5px;
  }
}
</style>